import { onBeforeUnmount, onMounted, ref } from "vue";
import type { Ref } from "vue";

const useWindowWidth = (widthParams: number, heightParams: number): { width: Ref<number>, height: Ref<number> } => {

    const width: Ref<number> = ref<number>(widthParams);

    const height: Ref<number> = ref<number>(heightParams);

    const onResize = () => {
        width.value = window.innerWidth;
        height.value = window.innerHeight;
    };

    onMounted(() => {
        width.value = window.innerWidth;
        height.value = window.innerHeight;
        window.addEventListener("resize", onResize);
    });

    onBeforeUnmount(() => {
        window.removeEventListener("resize", onResize);
    });

    return {
        width,
        height,
    };
};

export default useWindowWidth
